/*
 * @Author: kanglang
 * @Date: 2021-01-25 13:14:35
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-05-28 17:40:51
 * @Description: 输入框
 */

import React from 'react';
import { View, TextInput, Text, StyleSheet } from 'react-native';
import {
  px2dp,
  fontColorBlack,
  mainBgColorLightGray,
  fontColorDeepGray,
  isAndroid
} from '@/styles';

const InputItem = ({
  onChangeValue,
  value,
  unit,
  name,
  placeholder
}) => {
  const onChange = (text) => {
    onChangeValue && onChangeValue(name, text);
  };
  return (
    <View style={styles.amountSelect}>
      <TextInput
        name={name || 'name'}
        placeholder={placeholder}
        maxLength={10}
        style={[
          styles.goodsWrapPriceTextInput,
          { color: fontColorBlack },
        ]}
        defaultValue={value}
        value={value}
        underlineColorAndroid='transparent'
        onChangeText={(text) => {
          onChange(text);
        }}
        keyboardType={isAndroid ? 'numeric' : 'decimal-pad'}
        onBlur={() => { }}
      />
      {unit && <Text style={{ color: fontColorDeepGray }}>{unit}</Text>}

    </View>
  );
};
export default InputItem;
const styles = StyleSheet.create({
  amountSelect: {
    marginTop: px2dp(24),
    paddingHorizontal: px2dp(24),
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: mainBgColorLightGray,
  },
  goodsWrapPriceTextInput: {
    fontSize: px2dp(28),
    height: px2dp(88),
    flex: 1,
    backgroundColor: mainBgColorLightGray,
    paddingTop: 0,
    paddingBottom: 0,
  },
});
